<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位问题</title>
		<style>
			/* 定位：①相对定位：相对于父级，没有父级相对于body
			        ②绝对定位：根据页面的左上角进行定位，失去文档流
			 */
			div{
				width: 200px;
				height: 200px;
				background:#f00;
				border-radius:50%;
				position: relative;/* 2D相对定位 */
				posi tion: absolute;/* 3D绝对定位 */
				left:0;
				top:0;
			}
			.d1{
				background: #00ff00;
			}
			.d3{
				background: #ffff00;
			}
			.d5{
				background: #ff5500;
			}
			.d2{
				border-radius: 0;
			}
			/* 需求：所有的效果改成四方块，不允许使用div选择器，类选择器 */
			/* 类选择器：通过别名选择元素    css语法：.别名{}
			                            html语法  class="别名"或者class="别名1，别名2..."
					多个别名，建议不超过3个，用空格分隔，解决元素选择器，只按照元素名选择器9
			  */
			 .d{
				 border-radius: 0;
			 }
		</style>
	</head>
	<body>
		<div class="d1 d"></div>
		<div class="d2 d" ></div>
		<div class="d3 d"></div>
		<div class="d4 d"></div>
		<div class="d5 d"></div>
	</body>
</html>